<template>
<view class="recommend-dialog flexc align-center">
	<view class="title">
		已生成二维码
	</view>
	<view class="desc">
		快让朋友们扫一扫，体验一下吧
	</view>
	<image class="qrcode-img" :src="recommendImg" :show-menu-by-longpress="true"></image>
	<button class="button wx" open-type="share">
		<image class="wx-icon" src="@/static/weixin.png"></image>
		<text>微信推荐</text>
	</button>
	<view class="button cancel" @click="emits('onCancel')">
		取消
	</view>
</view>
</template>

<script setup>
import { onShareAppMessage } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/user";
import { ref, watch } from 'vue';
import {buildShareQueryParams, SHARE_ACTION_RECOMMEND} from "@/tools/share";
const userStore = useUserStore();
const props = defineProps({
	show: Boolean,
  recommendImg: String,
})
const emits = defineEmits(['onCancel', 'onConfirm'])

onShareAppMessage((options) => {
  const title = `推荐您体验一下`;
  const query = buildShareQueryParams(SHARE_ACTION_RECOMMEND, {
    Referrer: userStore.userInfo.customerId
  });
  if (options.from === "button") {
    return {
      title,
      path: `pages/appointment/appointment?${query}`,
    };
  } else {
    return {
      title,
      path: `pages/appointment/appointment?${query}`,
    };
  }
});
</script>

<style lang="scss">
.recommend-dialog {
	background-color: white;
	border-top-right-radius: 48rpx;
	border-top-left-radius: 48rpx;
	padding-top: 60rpx;
	.title {
		color: $text-color1;
		font-size: 40rpx;
	}
	.desc {
		font-size: 24rpx;
		color: $text-color5;
		margin-top: 15rpx;
	}
	.qrcode {
		margin: 56rpx;
		width: 390rpx;
		height: 390rpx;
		position: absolute;
		left: 10000rpx;
	}
	.qrcode-img {
		margin: 56rpx;
		width: 390rpx;
		height: 390rpx;
	}
	.button {
		height: 96rpx;
		min-height: 96rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		align-self: stretch;
		margin: 0 64rpx;
		border-radius: 48rpx;
		&.wx {
			background-color: #00D668;
			color: white;
			.wx-icon {
				width: 45rpx;
				height: 40rpx;
				margin-right: 7rpx;
			}
		}
		&.cancel {
			background-color: #F3F3F3;
			color: $text-color2;
			margin-top: 32rpx;
		}
	}
}
</style>
